<template>
	<view class="container">
		<view class="nft_card_bg"></view>
		<view class="nft_card">
			<view class="pay_logo">
				<view class="logo">
					<image src="../../static/images/logo.png" mode=""></image>
				</view>
			</view>
			<view class="tips">需要会员余额支付时，请出示</view>
			<!-- 中间二维码 -->
			<view class="Qrcode">
				<image src="../../static/images/my/erweima.png" mode=""></image>
			</view>
			<view class="tips">每分钟自动更新，请勿截图分享</view>
			<!-- 累计 -->
			<view class="total_card">
				<view class="total">
					<view class="num">1</view>
					<view class="">累计</view>
				</view>
				<view class="total">
					<view class="num">1</view>
					<view class="">储值</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		}
	}
</script>

<style lang="scss" scoped>
	.nft_card_bg {
		height: 400rpx;
		background-color: $echo-main-color;
	}

	.nft_card {
		position: relative;
		z-index: 2;
		top: -100rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: white;

		.pay_logo {

			.logo {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
				top: -80rpx;


				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tips {
			text-align: center;
			letter-spacing: 4rpx;
			color: #999;
		}

		.Qrcode {
			text-align: center;
			padding: 80rpx 0;

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.total_card {
			position: relative;
			display: flex;
			justify-content: space-around;
			left: 50%;
			margin-left: -40%;
			margin-top: 80rpx;
			width: 80%;
			height: 100rpx;
			background-color: #f8f8f8;
			border-radius: 8rpx;

			.total {
				width: 50%;
				text-align: center;
				color: #999;
				font-size: 24rpx;

				.num {
					font-size: 30rpx;
					font-weight: 700;
					color: #333;
				}

				view {
					height: 50%;
					line-height: 26px;
				}
			}
		}
	}
</style>
